<template>
  <div class="home">
    <!-- <my-header>
      <span>首页</span>
    </my-header> -->
    <my-input @add="add"></my-input>
    <my-list>
      <h1>未完成</h1>
    </my-list>
    <my-list :list="list">
      <h1>已完成</h1>
    </my-list>
    <my-list :list="list">
      <h1>全部任务</h1>
    </my-list>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import myHeader from "@/components/myHeader.vue";
import myInput from "@/components/myInput.vue";
import myList from "@/components/myList.vue";

export default {
  data() {
    return {
      list: [{ title: "任务1", status: false }],
    };
  },
  name: "HomeView",
  components: {
    HelloWorld,
    myHeader,
    myInput,
    myList,
  },
  methods: {
    add(val) {
      this.list.push({ title: val, status: false });
    },
  },
};
</script>
